<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .left,
        .right,
        .middle {
            float: left;
        }

        .left,
        .right {
            border: 1px solid #eee;
            width: 100px;
            height: 200px;
            line-height: 28px;
            cursor: pointer;
            text-align: center;
        }

        .active {
            background-color: #eee;
        }
    </style>
</head>

<body>
    <div class="left">

    </div>
    <div class="middle">
        <input type="button" value=">" />
        <input type="button" value="<" />
    </div>
    <div class="right">

    </div>
</body>
<script>
    let arr = ['樱满集', '蝶祈', '樱满真名', '恙神涯', '校条祭', '樱满春夏', '亚里沙']
    let left = document.querySelector('.left')
    let right = document.querySelector('.right')
    let btn1 = document.querySelectorAll('input')[0]
    let btn2 = document.querySelectorAll('input')[1]
    //渲染左侧div
    arr.forEach(v => {
        let div = document.createElement('div')
        div.innerHTML = v
        left.appendChild(div)
    });
    //设置所有div的点击事件
    let leftList = document.querySelectorAll('.left div')
    let rightList = document.querySelectorAll('.right div')
    let divList = [...leftList, ...rightList]
    divList.forEach(v => {
        v.onclick = () => {
            v.className = 'active';
        }
    });
    //左
    btn1.onclick = () => {
        let active = document.querySelectorAll('.left .active')
        active.forEach(v => {
            v.className = ''
            right.appendChild(v)
        });
    }
    //右
    btn2.onclick = () => {
        let active = document.querySelectorAll('.right .active')
        active.forEach(v => {
            v.className = ''
            left.appendChild(v)
        });
    }
</script>

</html>